import a from "b";
<!-- export { a }; -->

style {
  div {
    color: green;
  }
}

<style id="css">
  div {
    color: ${x};
  }
</style>

<script>
  var y = ${x};
</script>

static {
  doThings();
  andStuff();
  function more() {
    abc();
  }
}

class {
  onCreate() {
    this.stuff();
  }
}

<macro|stuff| name="thing">
  <div x=stuff.x/>
</macro>

$ var b = thing;
$ let c = thing;
<div b=b c=c>
  $ var d = thing;
  $ let e = thing;
  <div d=d e=e/>
</div>

<div on-click("handleClick", a, b, ...d)/>

<div id:scoped="1"/>

<div class=["a", { b: c, d }] style={ a: "b" }/>

<input type="text">

<${a} key="x">
  <div/>
</>

<thing x=1/>

<other|a| on-click("handleClick", a, b, ...d)>
  <div/>
</other>

<other x=1 ...thing b={ a: 1 } ...c>
  <div/>
  <@c c=1>
    <div/>
    <@d d=1>
      <div/>
    </@d>
  </@c>
</other>

<div#a.b class="c" a={a: 1} c  =  "${d}" ...e ...f()>
  ${a}
  <!--123-->
  <html-comment>abc</html-comment>
  <div c=1/>
  <div d=1/>
  <if(x === a)>a ${b}</>
  <else-if(x === 2)>
    b
  </else-if>
  <else>c</else>
</div>
<div b=1/>

<div>

 123

 abc

 123

</div>

<span ...abc/>

<if(cond)>
  Hello ${planet}
</if>

<for|i| from=0 to=10 step=2>
  <div c=1/>
</for>

<for|key, val| in=obj>
  <div c=1/>
</for>
